// import { AppDispatch } from '@/redux/store'
// import { useDispatch } from 'react-redux'
import { useAppDispatch } from '@/app/hooks'
import { useState } from 'react'
import { searchAsync } from './slice'


export default function SearchHeader () {

  const [searchName, setSearchName] = useState('')

  //  const dispatch: AppDispatch = useDispatch()
  const dispatch = useAppDispatch()

  const search = async () => {
    // 分发一个异步action: 发搜索请求
    const action = await dispatch(searchAsync(searchName))
    console.log(action)  
    // {type: "userSearch/searchAsync/fulfilled"}
    // type: "userSearch/searchAsync/rejected"
    
    // if (action.type==='userSearch/searchAsync/fulfilled') {
    //   alert('搜索成功')
    // } else if (action.type==='userSearch/searchAsync/rejected') {
    //   alert('搜索失败')
    // }
  }

  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input value={searchName} onChange={e => setSearchName(e.target.value)} type="text" placeholder="enter the name you search"/>
        <button onClick={search}>Search</button>
      </div>
    </section>
  )
}
